<template>
  <div
    v-if="comments.length || commenting"
    class="issues-self-comments"
    style="margin-left: 4.25rem;"
  >
    <comment-container v-show="commenting" @commented="commented" />
    <div v-loading="loading">
      <comments-list-item
        v-for="item in comments"
        :key="item.id"
        :comment="item"
        @repliedComment="repliedComment"
        @deletedComment="deletedComment"
      />
    </div>
    <span v-if="curIssue.discussionsCount > 3 && !pagination.current" class="info-deep f-mini">
      共有 {{ curIssue.discussionsCount }} 条评论，
      <span class="link el-link--primary" @click="seeComments">点击查看</span>
    </span>
    <pagination
      v-if="pagination.current"
      :current-page="pagination.current"
      :page-count="pagination.count"
      is-mini
      query-key="self_comment_page"
      class="m-t-0"
    />
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { formatComments } from '@/components/issues-answers/format';
import CommentContainer from './components/comment-container';
import CommentsListItem from './components/comments-list-item';

export default {
  name: 'issues-self-comments', // 针对问题的评论（原先的评论改为回答了）
  components: {
    CommentContainer,
    CommentsListItem,
  },
  props: {
    commenting: Boolean,
  },
  data() {
    return {
      loading: false,
      comments: [],
      pagination: {
        current: null,
        count: null,
      },
    };
  },
  computed: {
    ...mapState({ curIssue: 'currentIssue' }),
    loadCommentsParams() {
      return {
        role: 'discuss',
        placement: 'Issue',
        placementId: this.$route.params.issueId,
        page: this.$route.query.self_comment_page,
      };
    },
  },
  mounted() {
    const commentPage = this.loadCommentsParams.page;
    this.loadComments({
      page: commentPage || 1,
      number: commentPage ? undefined : 3,
    });
  },
  methods: {
    // 查看更多
    seeComments() {
      this.addQuery({ self_comment_page: 1 });
    },
    // 加载评论
    loadComments(obj = {}) {
      this.loading = true;
      const params = Object.assign({}, this.loadCommentsParams, obj);
      this.$api.comments.index(params)
        .then((res) => {
          this.comments = formatComments(res.data);
          if (!params.number) {
            this.pagination.current = res.kaminari.current_page;
            this.pagination.count = res.kaminari.total_pages;
          }
        })
        .catch(() => {})
        .then(() => { this.loading = false; });
    },
    // 刚评论了
    commented(comment) {
      this.$message.success('评论成功');
      this.comments.unshift(comment);
      this.$emit('update:commenting', false);
    },
    // 回复了评论
    repliedComment(comment) {
      this.comments.push(comment);
    },
    // 删除了评论
    deletedComment(comment) {
      this.comments.splice(this.comments.indexOf(comment), 1);
    },
  },
  watch: {
    loadCommentsParams() { this.loadComments(); },
  },
};
</script>

<style lang="scss">
.issues-self-comments {
  padding: .5rem 1rem;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
}
</style>
